<template>

  <el-popover
      v-slot:reference
      placement="top-start"
      trigger="hover"
      :content="props.describe"
      :disabled="!props.describe"
      :popper-style="{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        textAlign: 'center',
        padding: '10px',  // 给内容一些内边距，使其看起来更美观
        width: 'auto',     // 宽度根据内容自适应
        whiteSpace: 'normal',  // 换行文本时，确保文本显示不被截断
        minWidth: 'auto',   // 最小宽度根据内容自动调整
        minHeight: 'auto',
      }"
  >
    <el-tag
        style="height: auto;"
        :style="test"
        @onclick="showParam"
    >{{ props.text }}
       <el-icon v-if="isEdit === '1'" style="font-size: 25px;" @click="deleteTag">
        <RemoveFilled/>
        </el-icon>
    </el-tag>
  </el-popover>

</template>

<script setup lang="ts">

import {onBeforeMount, ref} from "vue";
import {RemoveFilled} from "@element-plus/icons-vue";

//接收的
const props = defineProps({
  describe: String, //描述
  text: String,
  backgroundColor: String, //颜色
  opacity: Number, //透明度
  fontSize: String, //字体大小(默认去父级的)
  borderRadius: String, //长方形圆角弧度
  borderColor: String, // 边缘颜色
  fontWeight: String, //是否加粗
  color: String, //字体颜色
  totalColor: String,  //整体颜色
  isEdit: String,
  marginLeft: String,
  id: Number
});


//本地
let test = ref({
  marginLeft : '10px',
  describe: String, //描述
  backgroundColor: '',
  opacity: 1,
  borderRadius: '4px',
  fontSize: '15px',
  borderColor: '',
  fontWeight: 'no',
  color: '',
  totalColor: '',
  isEdit :'0',
  id: Number
})


let emit =defineEmits(['deleteTarget','refreshTags'])

let deleteTag = ()=>{
  //独立的
  emit('deleteTarget',props.id)
}

let result = () => {
  Object.assign(test.value, props);
  //没传默认为10
  if (!test.value.marginLeft){
    test.value.marginLeft = '10px'
  }

  if (props.totalColor) {
    let totalColor = test.value.totalColor;
    //去除边框颜色和字体颜色的透明度设置
    test.value['color'] = updateColor(totalColor) || '';
    test.value['borderColor'] = updateColor(totalColor) || '';
    test.value['backgroundColor'] = totalColor;
  }
  return test.value;
}

// 去除透明度
const updateColor = (colorValue: string | undefined) => {
  if (colorValue) {
    let parts = colorValue.toString().split(',');
    if (parts.length > 3) {
      return `rgb(${parts[0].slice(5)}, ${parts[1]}, ${parts[2]})`;
    }
  }
  return colorValue;
};

onBeforeMount(() => {
  console.log(props.totalColor)
  result()
});

// 去除透明度
const showParam = () => {
  console.log(props.totalColor)
};


</script>

